<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>折线报表</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />

        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">

        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script type="text/javascript" src="./js/laydate/laydate.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
    <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">统计页面</a>
                <a>
                    <cite>折线报表</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">


                    <div class="layui-card">

                        <div class="layui-card-body ">
                                地点:<select id="select_address" style="width: 150px;height: 20px">

                                    </select>

                                开始日期:
                            <input  type="datetime-local" id="searchDate_start" style="height: 20px"
                                             timeFormat="yyyy-MM-dd" />
                            <!--     value="2018-06-12T19:30"   min="2018-06-07T00:00" max="2018-06-14T00:00"-->
                                结束日期：<input type="datetime-local" id="searchDate_end"
                                           name="meeting-time" style="height: 20px">
                                记录数：<select id="select_item" style="height: 20px">
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                            <option value="200">200</option>
                                            <option value="300">300</option>
                                            <option value="500">500</option>
                                            <option value="500">1000</option>
                                       </select>
                            <button type="button" class="layui-btn"  onclick="searchChart()">查找</button>
                        </div>

                        <div class="layui-card-body ">
                            <div id="main" style="width: 1000px;height:300px"></div>
                            <div id="main2" style="width: 1000px;height:300px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

         <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script src="js/echarts.min.js"></script>

        <script src="data/sensor.js"></script>

        <script type="text/javascript">
        //绑定数据源呈现折线图
         $(function () {
             initSelectData();//初始化选择列表
             var resultData=getDataByFilter();
             initChartData(resultData);
             initChartData2(resultData);

         })

        function getDataByFilter() {
            var deviceId=$("#select_address").val();
            var startTime=$("#searchDate_start").val();
            var endTime=$("#searchDate_end").val();
            if(startTime!=""){
                 var arr=startTime.split('T');
                 startTime=arr[0]+" "+arr[1]+":00"
            }
            if(endTime!=""){
                var arr=endTime.split('T');
                endTime=arr[0]+" "+arr[1]+":00"
            }
            var pageSize=$("#select_item").val();
            var resultData=sensorServer.getSensorDataListByDate({"page":1,"rows":pageSize,"deviceId":deviceId,
                "startTime":startTime,
                "endTime":endTime});
            return resultData;
        }

        function  initSelectData() {
            var dataSensor=sensorServer.getSensorList({"page":1,"rows":1000});
            if (dataSensor!=null) {
                let optionList="";
                for(let i=0;i<dataSensor.data.length;i++){
                     optionList+="<option value='"+dataSensor.data[i].deviceid+"'>"+dataSensor.data[i].devicelocation+"-"+dataSensor.data[i].deviceid+"</option>";
                }
                $("#select_address").append(optionList);
            }
        }

        function searchChart() {
            var seText=$("#searchDate").val();
            var deviceId=$("#select_address").val();

            var startTime=$("#searchDate_start").val();
            var endTime=$("#searchDate_start").val();
            var resultData=getDataByFilter(); //sensorServer.getSensorDataListByDate({"page":1,"rows":10,"deviceId":deviceId,"day":seText});
            initChartData(resultData);
            initChartData2(resultData);
        }

        function  yDataInfo(name,type,stack,data) {
            this.name=name;
            this.type=type;
            this.stack=stack;
            this.data=data;
         }

          //初始化第一个表格
          function  initChartData(resultData) {
             if(resultData==null){
                 console.log("返回null")
                 return;
             }
                 var xData=new Array(resultData.data.length);
                 for (var i=0;i<resultData.data.length;i++)
                 {
                     xData[i]=resultData.data[i].uploadtime;
                 }

                 //var yLineHeader=["CO2","CH4","T","humidity"];
                 var yLineHeader=["CO2","CH4"];
                 var yDataList=new Array(yLineHeader.length);


                 var infoCo2=new yDataInfo();
                 infoCo2=getDataArr("CO2",resultData);

                 var infoCh4=new yDataInfo();
                 infoCh4=getDataArr("CH4",resultData);


                 var infoT=new yDataInfo();
                 infoT=getDataArr("T",resultData);

                 var infoHumidity=new yDataInfo();
                 infoHumidity=getDataArr("humidity",resultData);

                 yDataList[0]=infoCo2;
                 yDataList[1]=infoCh4;
                 // yDataList[2]=infoT;
                 // yDataList[3]=infoHumidity;
             // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('main'));

             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: '甲烷(%)/二氧化碳(%)'
                 },
                 tooltip: {
                     trigger: 'axis'
                 },
                 legend: {
                     data: yLineHeader//['CO2','Ch4','T','直接访问','搜索引擎']
                 },
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 toolbox: {
                     feature: {
                         saveAsImage: {}
                     }
                 },
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
                     data: xData   // ['0','周二','周三','周四','周五','周六','周日']
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series:yDataList
                 // series: [
                 //     {
                 //         name:'邮件营销',
                 //         type:'line',
                 //         stack: '总量',
                 //         data:[120, 132, 101, 134, 90, 230,20]
                 //     },
                 //     {
                 //         name:'联盟广告',
                 //         type:'line',
                 //         stack: '总量',
                 //         data:[220, 182, 191, 234, 290, 330, 310]
                 //     },
                 //     {
                 //         name:'视频广告',
                 //         type:'line',
                 //         stack: '总量',
                 //         data:[150, 232, 201, 154, 190, 330, 410]
                 //     },
                 //     {
                 //         name:'直接访问',
                 //         type:'line',
                 //         stack: '总量',
                 //         data:[320, 332, 301, 334, 390, 330, 320]
                 //     },
                 //     {
                 //         name:'搜索引擎',
                 //         type:'line',
                 //         stack: '总量',
                 //         data:[820, 932, 901, 934, 1290, 1330, 1320]
                 //     }
                 // ]
             };

             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);


         }

          //初始化第二个表格
          function  initChartData2(resultData) {
             if(resultData==null) {
                 console.log("结果null");
                 return;
             }
            var xData=new Array(resultData.data.length);
            for (var i=0;i<resultData.data.length;i++)
            {
                xData[i]=resultData.data[i].uploadtime;
            }

            var yLineHeader=["T","humidity","CO","O2"];
            var yDataList=new Array(yLineHeader.length);

            var infoCo2=new yDataInfo();
            var infoT=new yDataInfo();
            infoT=getDataArr("T",resultData);

            var infoHumidity=new yDataInfo();
            infoHumidity=getDataArr("humidity",resultData);

            var infoO2=new yDataInfo();
            infoO2=getDataArr("O2",resultData);

            var infoCO=new yDataInfo();
            infoCO=getDataArr("CO",resultData);

            yDataList[0]=infoT;
            yDataList[1]=infoHumidity;
            yDataList[2]=infoO2;
            yDataList[3]=infoCO;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main2'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '温度(℃)/湿度(%)/一氧化碳(ppm)/氧气(%)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: yLineHeader//['CO2','Ch4','T','直接访问','搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData   // ['0','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value'
                },
                series:yDataList,
                smooth: true
                // series: [
                //     {
                //         name:'邮件营销',
                //         type:'line',
                //         stack: '总量',
                //         data:[120, 132, 101, 134, 90, 230,20]
                //     },
                //     {
                //         name:'联盟广告',
                //         type:'line',
                //         stack: '总量',
                //         data:[220, 182, 191, 234, 290, 330, 310]
                //     },
                //     {
                //         name:'视频广告',
                //         type:'line',
                //         stack: '总量',
                //         data:[150, 232, 201, 154, 190, 330, 410]
                //     },
                //     {
                //         name:'直接访问',
                //         type:'line',
                //         stack: '总量',
                //         data:[320, 332, 301, 334, 390, 330, 320]
                //     },
                //     {
                //         name:'搜索引擎',
                //         type:'line',
                //         stack: '总量',
                //         data:[820, 932, 901, 934, 1290, 1330, 1320]
                //     }
                // ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }

          //根据title获取到对应的列的值
          function getDataArr(headerName,resultData){
             var elme=new yDataInfo();
             if (headerName=="CH4") {
                 elme.name = headerName;
                 elme.type = 'line';
                 //elme.stack = '总量';
                 var infoCh4Arr = new Array(resultData.data.length);
                 for (var i = 0; i < resultData.data.length; i++) {
                     infoCh4Arr[i] = resultData.data[i].ch4;
                 }
                 elme.data = infoCh4Arr;
             }
             if (headerName=="CO2") {
                 elme.name=headerName;
                 elme.type='line';
                 //elme.stack='总量';
                 var co2Arr=new Array(resultData.data.length);
                 for (var i=0;i<resultData.data.length;i++){
                     co2Arr[i]=resultData.data[i].co2;
                 }
                 elme.data=co2Arr;
             }
             if (headerName=="T") {
                 elme.name = headerName;
                 elme.type = 'line';
                 //elme.stack = '总量';
                 var infoCh4Arr = new Array(resultData.data.length);
                 for (var i = 0; i < resultData.data.length; i++) {
                     infoCh4Arr[i] = resultData.data[i].temperature;
                 }
                 elme.data = infoCh4Arr;
             }
             if (headerName=="humidity") {
                  elme.name=headerName;
                  elme.type='line';
                 //elme.stack='总量';
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      arrValue[i]=resultData.data[i].humidity;
                  }
                  elme.data=arrValue;
              }
             if (headerName=="CO") {
                  elme.name=headerName;
                  elme.type='line';
                 //elme.stack='总量';
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      if(arrValue[i]=resultData.data[i].maxCO!=null){
                          arrValue[i]=resultData.data[i].maxCO;
                      }else{
                          arrValue[i]=0;
                      }
                  }
                  elme.data=arrValue;
              }
             if (headerName=="O2") {
                  elme.name=headerName;
                  elme.type='line';
                  //elme.stack='总量';
                  var arrValue=new Array(resultData.data.length);
                  for (var i=0;i<resultData.data.length;i++){
                      if (resultData.data[i].minO2!=null) {
                          arrValue[i] =resultData.data[i].minO2;
                      }else{
                          arrValue[i] =0;
                      }
                  }
                  elme.data=arrValue;
              }
             return elme;
         }
    </script>
    </body>
</html>
